import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import { IndexBar, List, Card, Tag, Input, Button } from 'antd-mobile'
function Index() {
    let [listCity, setListcity] = useState([])
    let [listHot, setListHot] = useState([])
    let getList = async () => {
        let res = await http.get('/api/city')

        console.log('城市列表', res);

        let { code, data } = res.data

        if (code === 200) {
            setListcity(data.city)
            setListHot(data.hotCities)
        }

    }
    let [seach, setSeach] = useState([])
    const SearchBar = async () => {
        let res = await http.get('/api/city/search')

        console.log('搜索', JSON.stringify(res));

        let { code, data } = res.data

        if (code === 200) {
            setSeach(data)
        }

    }
    useEffect(() => {
        getList()
        SearchBar()
    }, [])

    return (
        <div>
            <div style={{ display: 'flex' }}>
                <Input placeholder='请输入内容' style={{ width: '75%' }} clearable onEnterPress={() => SearchBar()} /> <Button size='mini'>清除</Button>
            </div>
            <Card title='热门城市'>
                {
                    listHot?.map((item, ind) => (
                        <Tag key={ind} style={{ margin: '20px' }}>{item.name}</Tag>
                    ))
                }
            </Card>
            <Card title='城市列表'>
                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {listCity?.map(group => {
                            const { initial, list } = group
                            return (
                                <IndexBar.Panel
                                    index={initial}
                                    title={`${initial}`}
                                    key={`${initial}`}
                                >
                                    <List>
                                        {list.map((item, index) => (
                                            <List.Item key={index}>{item.name}</List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>
            </Card>
        </div>
    )
}

export default Index
